<template>
  <n-layout-header class="app-header" bordered>
    <div class="app-header__left"></div>
    <div class="app-header__right">
      <n-dropdown trigger="hover" :options="options">
        <n-space class="avatar" align="center">
          <n-text>{{ user.info?.name }}</n-text>
          <n-avatar :src="user.info?.headImg"></n-avatar>
        </n-space>
      </n-dropdown>
    </div>
  </n-layout-header>
</template>

<script lang="ts" setup>
import { useStore } from '@/hooks/store'

const { user } = useStore()

const options = [
  { label: '个人设置', key: 'profile' },
  { label: '修改密码', key: 'editProfile' },
  { label: '退出登录', key: 'logout' }
]
</script>

<style lang="scss" scoped>
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 16px;
  height: 64px;
}

.avatar {
  cursor: pointer;
  > :deep(div:last-child) {
    font-size: 0;
  }
}
</style>
